<template>
  <div class="contentMiddle">
    <div class="top">
        <div>
          <p>停车位总数/个</p>
          <div class="numberBox" v-for="item in totalNum">
            <div class="number">{{item}}</div>
          </div>
        </div>
        <div>
          <p>停车场总数/个</p>
          <div class="numberBox" v-for="item in totalPark">
            <div class="number">{{item}}</div>
          </div>
        </div>
        <div>
          <p>已用车位数/个</p>
          <div class="numberBox" v-for="item in useNum">
            <div class="number">{{item}}</div>
          </div>
        </div>
    </div>
    <div class="map">
      <div id="contentMap"></div>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  import qs from 'qs'
  let echarts = require('echarts/lib/echarts')
  import china from 'echarts/map/js/china.js'
  import hebei from 'echarts/map/js/province/hebei.js'
  import shijiazhuang from 'echarts/map/js/hebei_city/shijiazhuang.js'
  export default {
    name: 'contentMiddle',
    props: ['map'],
    data() {
      return {
        totalNum: [],
        totalPark: [],
        useNum: [],
        mapName: '石家庄',
        mapData:[
          {'name':'久富大厦停车场','latitude':38.0540409238, 'longitude':114.6149033918,  'color':'#0394d9'},
          {'name':'科技中心停车场','latitude':38.010612, 'longitude':114.484444,   'color':'#b42fd5'},
          {'name':'科技中心停车场','latitude':38.247841, 'longitude':114.195824,   'color':'#b42fd5'},
          {'name':'久富大厦停车场','latitude':38.259869, 'longitude':113.749725,  'color':'#0394d9'},
          {'name':'科技中心停车场','latitude':37.943241, 'longitude':115.217819,   'color':'#b42fd5'},
          {'name':'科技中心停车场','latitude':37.75631, 'longitude':114.776161,   'color':'#b42fd5'},
        ],
      }
    },
    mounted() {
      this.getParkNum();
      if(this.map != '') {
        this.mapName = this.map;
      }
      this.drawMap();
    },
    methods: {
      getParkNum () {
        axios({
          method: 'post',
          url: '/api/bParkManage/getParkDataInfo',
          data: qs.stringify({type: 1})
        }).then((res) => {
          console.log(res)
          this.totalNum = res.data.data.total.toString().replace(/(.)(?=[^$])/g, "$1,").split(",");
          this.useNum = res.data.data.used.toString().replace(/(.)(?=[^$])/g, "$1,").split(",");
          this.totalPark = res.data.data.totalPark.toString().replace(/(.)(?=[^$])/g, "$1,").split(",");
        })
      },
      drawMap() {
        let _this = this;
        var myChartsMap = echarts.init(document.getElementById('contentMap'));
        myChartsMap.setOption({
           geo: {
            type: 'map',
            roam: false,
            map: this.mapName, //地图类型。
            label: {
              normal: {
                show: false,
                color:'#fff'
              },
              emphasis: {
                textStyle: {
                  color: '#fff'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: '#0394d9',
                areaColor: 'rgba(0,52,96,1)',
              },
              emphasis: {
                areaColor: '#389BB7',
                borderWidth: 0
              },
            },
            zoom:1.2,//放大比例

          },
          // tooltip:{
          //   show:true, //鼠标移入是否触发数据
          //   trigger: 'item', //出发方式
          //   formatter(params){
          //     let a = params.value;
          //     const b = '<span style="display:inline-block;height:100px;width:200px;border:1px solid rgb(32,195,248);border-radius: 6px;box-shadow: rgb(32,195,248) 0px 0px 12px 2px inset;">' + a +'</span>'
          //     return b
          //   }
          // },
          series: [{
            //根据经纬度在地图上描点
            type: 'scatter',
            coordinateSystem: 'geo',
            // animation: true,
            // rippleEffect: {
            //   brushType: 'stroke'
            // },
            // symbolSize: function (val,params) {
            //   return 30;
            // },
            data: this.mapData.map(function (itemOpt) {
              return {
                // name: itemOpt.name,
                value: [
                  itemOpt.longitude,
                  itemOpt.latitude,
                // itemOpt.value //数量
                ],
                label: {
                  emphasis: {
                    position: 'right',
                    show: false
                  }

                },
                itemStyle: {
                  normal: {
                  // color: itemOpt.color //色值
                    // color: 'green'
                  }
                }
              };
            }),
            showAllSymbol: false,
            symbolSize: function (params) {
              return [50,30];//描点的大小
            },
            // symbolSize: [50,30],
            symbol:'image://http://zmlmtc.zmzncs.com/upload/20200611/park.png'
          }]
        })
      }
    }
  }
</script>
<style scoped>
  .top {
    display: flex;
    justify-content: space-around;
    /* margin-top: 20px; */
  }
  .top div {
    display: inline-block;
    text-align: center;
  }
  .top div p {
    color: #fff;
    font-size: 2.4rem;
    font-family: FZZHJW--GB1-0;
    margin-bottom: 14px;
  }
  .numberBox {
    justify-content: center;
  }
  .number {
    height: 4rem;
    width: 4rem;
    background-image: url(../../../assets/number.png);
    background-size: 100% 100%;
    color: #05FEF5;
    font-size: 2.6rem;
    line-height: 4rem;
    font-weight: bolder;
    /* font-family: FZLTTHJW--GB1-0; */
  }
  .map {
    width: 88.14%;
    /* height: 48.02%; */
    height: 52%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24.04%;
  }
   #contentMap {
     display: inline-block;
     height: 100%;
     width: 100%;
   }

</style>
